<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <meta name="keywords" content="关键字台">
    <meta name="description" content="描述"> 
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctx}/webuploader/css/webuploader.css"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/webuploader/css/webuploader-demo.css"/>   
	<link href="${ctx}/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head>

<body class="gray-bg">
    
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="row">
                           <div class="col-sm-12">
                                <h3>广告图片管理</h3>
                           </div>
                           <c:if test="${gift_id!=-1}">
                           <button  onclick="history.go(-1)"style="position:absolute;right:20px;" class="btn btn-success">返回礼品页</button> 
                           </c:if>
                        </div>
                    </div>
                <form action="saveUrl" id="urlForm" class="form-horizontal" method="post">
                	<input type="hidden" id = "gift_id" name="gift_id" value="${gift_id}"/>
                    <c:forEach var="img" items="${imgList }" varStatus="status">
	                    <div class="ibox-content" >
	                         <div class="row">
	                         <div class="col-sm-2"></div>
	                         <div class="col-sm-8">
	                              <div class="form-group" id="img${img.id }">
										<label for="fileImage" class="col-sm-4 control-label">广告图片${status.index+1}：</label>
										<div class="col-sm-8">																					
											<div id="imageDiv" class="uploadimg">
												<img alt="IMAGE" src="${img.img }"  width="200px" height="200px" /> 
												<input type="button" class="btn btn-danger btn-xs" value="移除" onclick="delImg(${img.id })" style="margin-left: 10px" />
											</div>							
										</div>
									</div> 
									<div class="form-group" id="url${img.id }" >
										<label class="col-sm-4 control-label">URL链接：</label>
										<div class="col-sm-5">
											<input type="hidden" class="form-control" id ="id" name="id" value="${img.id }">
											<input type="text" class="form-control" id ="url" name="url" value="${img.url }" placeholder="请输入URL链接" maxlength="50">
										<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> URL链接以http://或https://开头</span>
										</div>
									</div>                             
	                          </div>
	                          <div class="col-sm-2"></div>                        
	                       </div>                       
	                    </div>
                    </c:forEach>
                    
                    <c:if test="${not empty imgList}">
	                    <div class="ibox-content" >
		                         <div class="row">
		                         <div class="col-sm-2"></div>
		                         <div class="col-sm-8">
		                              <div class="form-group" >
		                              		<div class="col-sm-8 col-sm-offset-4">
												<button type="button" class="btn btn-primary" onclick="saveUrl()">保存链接</button>
		                              		</div>
										</div>                             
		                          </div>
		                          <div class="col-sm-2"></div>                        
		                       </div>                       
		                    </div>
	                    <hr>
                    </c:if>
                </form>
                    
                    
                    <div class="ibox-content">
						<div class="page-container">
							<p>*最佳展示效果需正方型图片，如：200*200。图片名称不能超过20个字符。您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮</p>
							<div id="uploader" class="wu-example">
								<div class="queueList">
									<div id="dndArea" class="placeholder">
										<div id="filePicker" class="webuploader-container">
										<div class="webuploader-pick" style=" position: relative;">
										点击选择图片	
										<div id="rt_rt_1aa3dju5ks4pt80p7p1nsr1m6e1" 
												style="position: absolute; top: 0px; left: 317px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;">
												<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
												<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
										</div>
										</div>

										</div>
										<p>或将照片拖到这里，单次最多可选300张</p>
									</div>
								<ul class="filelist"></ul></div>
								<div class="statusBar" style="display:none;">
									<div class="progress" style="display: none;">
										<span class="text">0%</span>
										<span class="percentage" style="width: 0%;"></span>
									</div>
									<div class="info">共0张（0B），已上传0张</div>
									<div class="btns">
										<div id="filePicker2" class="webuploader-container"><div class="webuploader-pick">继续添加</div><div id="rt_rt_1aa3dju5onv6bep8t06qtee36" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div>
										<button type="button" class="uploadBtn state-pedding">开始上传</button>
									</div>
								</div>
							</div>
						</div>
                    </div>
                    
                    <div class="ibox-content" style="display:none;" id="loading">
				    	<div class="sk-spinner sk-spinner-wave" >
				            <div class="sk-rect1"></div>
				            <div class="sk-rect2"></div>
				            <div class="sk-rect3"></div>
				            <div class="sk-rect4"></div>
				            <div class="sk-rect5"></div>
				        </div>
				    </div>
                    
                </div>
            </div>
        </div>
    </div>
 
    
    
    
    <!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="${ctx}/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx}/js/common.js"></script>
    <script src="${ctx}/js/plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="${ctx}/webuploader/js/webuploader.min.js" ></script>
	<script type="text/javascript" src="${ctx}/webuploader/js/webuploader-demo-addProduct.js" ></script>
	<script src="${ctx}/js/plugins/sweetalert/sweetalert.min.js"></script>
   	<script type="text/javascript">
		
   		$(function(){
   			$("#urlForm").validate({
   				rules:{
   					url:{
   						url:true,
   						maxlength:50
   					}
   				},
   				messages:{
   					url:{
   						url:"请输入网址",
   						maxlength:"URL链接不能超过50个字符"
   					}
   				}
   			})
   		})	
   	
		function delImg(id){
			 swal({
		            title: "您确定要删除这张图片吗",
		            type: "warning",
		            showCancelButton: true,
		            confirmButtonColor: "#DD6B55",
		            confirmButtonText: "删除",
		            cancelButtonText: "取消",
		            closeOnConfirm: false
		        }, function () {
					$.ajax({
						url:'./delImg',
						data:{'id':id},
						type:'post',
						error : function(data) {
							swal("操作失败！", data.message, "error");
						},
						success : function(data) {
							if (data.state==1) {
								swal("操作成功！", "您已经删除了这张图片", "success");
								setInterval(function(){
									location.reload();								
								}, 2000); 
							} else {
								swal("操作失败！", data.message, "error");
							}
						}
					});                
		        });
		}
   		
   		function checkInput(){
   			var length = $("#id").length;
   			for(var i=0;i<length;i++){
   				var url=$("#url")[i].value;
   				if(!checkIsEmpty(url) && isURL(url)){
   					layer.msg("URL格式错误");
   				}
   			}
   		}
   		
   		
   		function saveUrl(){
   			if(!$("#urlForm").valid()){
   				return;
   			}
			/*if(!$("#urlForm").valid()){
   				return;
   			} */
   			var length = $("#urlForm input[name='id']").length;
   			var idArr = new Array(length);
   			var urlArr = new Array(length);
   			for(var i=0;i<length;i++){
   				var id=$("#urlForm input[name='id']")[i].value;
   				var url=$("#urlForm input[name='url']")[i].value;
   				idArr[i] = id;
   				if(checkIsEmpty(url)){
   					urlArr[i] =  "null";
   				}else{
   					urlArr[i] =  url;
   				}	
   			}
   			$.ajax({
   				url:'./saveUrl',
				data:{id:idArr.join(),url:urlArr.join()},
				type:'post',
				error : function(data) {
					swal("操作失败！", data.message, "error");
				},
				success : function(data) {
					if (data.state==1) {
						swal("操作成功！", "保存URL链接成功", "success");
						/* setInterval(function(){
							location.reload();								
						}, 2000);  */
					} else {
						swal("操作失败！", data.message, "error");
					}
				}
   			})
   			
   		}
	</script>
</body>
</html>
